<!--
 * @Description: 
 * @Date: 2022-02-12 10:51:54
 * @LastEditTime: 2022-02-12 17:25:11
 * @FilePath: /vue3-element-plus/src/views/components/input-number/index.vue
 * @Author: Devin
-->
<template>
  <div class="components">
    <el-card>
      <template #header>
        <div class="el-card-header">普通数字输入框</div>
        <div class="el-card-header-tip">自动失去焦点去除首位空格</div>
      </template>
      <CcInputNumber v-model="data" />
      <Code><div v-html="code1"></div></Code>
    </el-card>
    <el-card>
      <template #header>
        <div class="el-card-header">带 icon 的数字输入框</div>
        <div class="el-card-header-tip">
          要在输入框中添加图标，你可以简单地使用 prefix-icon 和 suffix-icon 属性，目前仅支持Font class类型的图标
        </div>
      </template>
      <CcInputNumber v-model="data" prefix-icon="iconfont icon-yuan" class="marginR20" />
      <CcInputNumber v-model="data" suffix-icon="iconfont icon-baifenhao" class="marginR20" />
      <CcInputNumber
        v-model="data"
        prefix-icon="iconfont icon-yuan"
        suffix-icon="iconfont icon-baifenhao"
        class="marginR20"
      />
      <CcInputNumber
        v-model="data"
        controls-position="right"
        prefix-icon="iconfont icon-yuan"
        class="marginR20"
      />
      <CcInputNumber
        v-model="data"
        controls-position="right"
        suffix-icon="iconfont icon-baifenhao"
        class="marginR20"
      />
      <CcInputNumber
        v-model="data"
        controls-position="right"
        prefix-icon="iconfont icon-yuan"
        suffix-icon="iconfont icon-baifenhao"
        class="marginR20"
      />
      <Code><div v-html="code2"></div></Code>
    </el-card>
    <el-card>
      <template #header>
        <div class="el-card-header">使用插槽设置icon</div>
        <div class="el-card-header-tip">prefix 和 suffix 命名的插槽。</div>
      </template>
      <CcInputNumber v-model="data" class="marginR20">
        <template #prefix>$</template>
      </CcInputNumber>
      <CcInputNumber v-model="data" class="marginR20">
        <template #suffix>%</template>
      </CcInputNumber>
      <CcInputNumber v-model="data" class="marginR20">
        <template #prefix>$</template>
        <template #suffix>%</template>
      </CcInputNumber>
      <CcInputNumber v-model="data" controls-position="right" class="marginR20">
        <template #prefix>$</template>
      </CcInputNumber>
      <CcInputNumber v-model="data" controls-position="right" class="marginR20">
        <template #suffix>%</template>
      </CcInputNumber>
      <CcInputNumber v-model="data" controls-position="right">
        <template #prefix>$</template>
        <template #suffix>%</template>
      </CcInputNumber>

      <Code><div v-html="code3"></div></Code>
    </el-card>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs } from '@vue/runtime-core';
import code from './code';
export default defineComponent({
  name: '',
  components: {},
  setup() {
    const state = reactive({ data: '', ...code });
    return { ...toRefs(state) };
  }
});
</script>
<style scoped lang='scss'>
</style>